<style lang="scss" scoped>
  .app-container {
    > p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .header {
      .el-form {
        left: 224px;
        top: 104px;
        min-height: 55px;
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 20px;

        .el-form-item {
          margin-bottom: 10px;

          ::v-deep .el-form-item__label {
            opacity: 1;
            /** 文本1 */
            font-size: 14px;
            font-weight: 400;
            letter-spacing: -0.07px;
            line-height: 32px;
            color: rgba(3, 2, 2, 1);
            text-align: right;
            vertical-align: middle;

          }

          ::v-deep .el-form-item__content {

            .el-input {
              width: 165px;

              .el-input__inner {
                width: 165px;
                border: 1px solid rgba(127, 127, 213, 0.5);
                border-radius: 10px;
              }
            }

            .el-button {
              height: 32px;
              opacity: 1;
              border-radius: 2px;
              background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
              padding: 8px 18px;
              color: #fff;
              border: none;
              margin-left: 25px;

              &:hover {
                border: none;
                background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

              }

              &:nth-child(1) {
                width: 60px;
                height: 32px;
                opacity: 1;
                border-radius: 2px;
                background: rgba(242, 243, 245, 1);
                color: rgba(0, 0, 0, 0.3);
                padding: 8px 16px 8px 16px;

                &:hover {
                  border: none;
                  background: rgb(228, 228, 228);

                }
              }
            }
          }
        }
      }
    }


    .content {
      opacity: 1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      padding: 20px;

      .con_header {
        display: flex;
        justify-content: space-between;

        > p {
          opacity: 1;
          margin: 0 0 0 20px;
          /** 文本1 */
          font-size: 18px;
          font-weight: 400;
          color: rgba(17, 38, 60, 1);
          border-left: 3px solid rgba(84, 91, 245, 1);
          padding-left: 10px;
          margin-bottom: 15px;
          margin-left: 0;
        }

        .el-button {
          height: 32px;
          opacity: 1;
          border-radius: 2px;
          background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
          padding: 8px 18px;
          color: #fff;
          border: none;
          margin-left: 25px;

          &:hover {
            border: none;
            background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

          }
        }
      }

      .el-tabs {
        margin-left: 30px;

        ::v-deep .el-tabs__item {
          color: rgba(188, 195, 212, 1);
          font-size: 14px;
        }

        ::v-deep .is-active {
          color: rgba(94, 129, 244, 1) !important;
          opacity: 1;
          /** 文本1 */
          font-size: 15px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(94, 129, 244, 1);
        }

        ::v-deep .el-tabs__active-bar {
          background-color: rgba(94, 129, 244, 1) !important;
        }
      }

      .description-cell {
        .cell-content {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.6em;
          max-height: 3.2em;
        }
      }


      ::v-deep .el-table {
        font-size: 12px;

        .el-tooltip__popper.is-dark {
          white-space: normal;
          max-width: 200px;
          /* 或者其他合适的宽度 */
        }
      }

      ::v-deep .el-table .el-table__header-wrapper th,
      ::v-deep .el-table .el-table__fixed-header-wrapper th {
        height: 41px !important;
        opacity: 1;
        border-radius: 10px 10px, 0px, 0px;
        background: rgba(83, 90, 244, 0.1);

        /** 文本1 */
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 11.72px;
        color: rgba(83, 90, 244, 1);
      }

      .status {
        display: block;
        padding: 3px 0px;
        opacity: 0.9;
        border-radius: 5px;
        font-size: 11px;
        text-align: center;
        transition: opacity 0.3s ease-in-out;
      }

      .status:hover {
        opacity: 1;
      }

      .status-unsold-recovered {
        color: rgb(159, 100, 223);
        /* 红色 */
        background-color: rgba(244, 235, 253, 1)
        /* 浅红色 */
      }

      .status-unsold-exception {
        color: #FF9800;
        /* 橙色 */
        background-color: #FFF3E0;
        /* 浅橙色 */
      }

      .status-sold-recovered {
        color: rgb(137, 64, 233);
        background-color: rgb(223, 241, 255);
      }

      .status-sold-exception {
        color: #F44336;
        /* 亮红色 */
        background-color: #FFEBEE;
        /* 浅红色 */
      }

      .status-sold-change-binding {
        color: #2196F3;
        /* 蓝色 */
        background-color: #E3F2FD;
        /* 浅蓝色 */
      }
    }
  }

  ::v-deep .el-dialog {
    width: 849px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 10px;
      }
    }

    .el-button {
      width: 60px;
      height: 32px;
      opacity: 1;
      border-radius: 2px;
      background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
      padding: 8px 16px 8px 16px;
      color: #fff;
      border: none;
      margin-left: 25px;

      &:hover {
        border: none;
        background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
      }

      &:nth-child(2) {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: rgba(242, 243, 245, 1);
        color: rgba(0, 0, 0, 0.3);
        padding: 8px 16px 8px 16px;

        &:hover {
          border: none;
          background: rgb(228, 228, 228);
        }
      }
    }

    .el-input-number {
      width: 165px;

      .el-input {
        width: 165px;

        .el-input__inner {
          width: 165px;
          border: 1px solid rgba(127, 127, 213, 0.5);
          border-radius: 0px;
        }
      }
    }

    .el-dialog__title {
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 8px;

    }
  }
</style>
<template>
  <div class="app-container">
    <div class="header">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="游戏名称:" prop="gameName">
          <el-input v-model="queryParams.gameName" placeholder="请输入游戏名称" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button type="danger" size="mini" @click="getList">刷新</el-button>
          <el-button type="danger" size="mini" @click="refresh">刷新缓存</el-button>
          <el-button type="primary" size="mini" @click="handleAdd()" v-hasPermi="['business:recycle:add']">新增
          </el-button>
          <el-button type="primary" size="mini" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="con_header">
        <p>{{ info.dictLabel }}</p>
      </div>
      <el-table v-loading="loading" :data="gameList" row-key="id" :default-expand-all="isExpandAll"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="编号" align="center" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.pid === 0">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="游戏名称" align="center" width="300">
            <template slot-scope="scope">
                <span>{{ scope.row.gameName }}</span>
            </template>
        </el-table-column> -->

        <el-table-column label="字段名称" align="center" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.gameField }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字段key" align="center" width="150">
          <template slot-scope="scope">
            <span v-if="!scope.row.gameKey">/</span> <span v-else>{{ scope.row.gameKey }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字段value" align="center" width="150">
          <template slot-scope="scope">
            <span v-if="!scope.row.fieldValue">/</span> <span v-else>{{ scope.row.fieldValue }}</span>
          </template>
        </el-table-column>

        <el-table-column label="排序" align="center" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字段类型" align="center" width="300">
          <template slot-scope="scope">
            <span v-if="!scope.row.fieldType">/</span> <span v-else>{{ getFieldTypeLabel(scope.row.fieldType) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pid === 0" size="mini" type="text" @click="add(scope.row)"
                       v-hasPermi="['business:stock:notation']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px;">新增</span>
            </el-button>
            <el-button size="mini" type="text" @click="edit(scope.row)" v-hasPermi="['business:stock:notation']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px;">编辑</span>
            </el-button>
            <el-button size="mini" type="text" @click="del(scope.row)" v-hasPermi="['business:stock:notation']">
              <span style="color: red;margin-right: 5px;">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="游戏名称" prop="gameName">
          <el-input v-model="form.gameName" :disabled="isInputDisabled" placeholder="请输入游戏名称"/>
        </el-form-item>

        <!-- 新增的输入框 -->
        <el-form-item label="父级字段" v-if="showNewInput" prop="parentField">
          <el-input v-model="form.parentField" placeholder="父级字段" :disabled="isInputDisabled"/>
        </el-form-item>

        <el-form-item label="字段名称" prop="gameField">
          <el-input v-model="form.gameField" placeholder="请输入字段名称"/>
        </el-form-item>

        <el-form-item label="游戏字段key" prop="gameKey">
          <el-input v-model="form.gameKey" placeholder="请输入系统关键字"/>
        </el-form-item>

        <el-form-item label="游戏字段Val" prop="fieldValue">
          <el-input v-model="form.fieldValue" placeholder="请输入字段值"/>
        </el-form-item>

        <el-form-item label="是否必填" prop="isRequired">
          <el-radio v-model="form.isRequired" :label="0">否</el-radio>
          <el-radio v-model="form.isRequired" :label="1">是</el-radio>
        </el-form-item>

        <el-form-item label="字段类型" prop="fieldType" v-if="!showNewInput">
          <el-select filterable v-model="form.fieldType" placeholder="请选择字段类型">
            <el-option label="输入框" value="input"/>
            <el-option label="多选框" value="checkbox"/>
            <el-option label="单选框" value="radio"/>
            <el-option label="下拉框" value="select"/>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number :min="0" v-model="form.sort" placeholder="请输入数字"/>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import {listDict, addDict, updateDict, delDict, refreshCache} from '@/api/business/gameDict.js'
    import {getData} from '@/api/system/dict/data.js'

    export default {
        name: 'dictionaryOfGames',
        data() {
            return {
                isInputDisabled: true, // 根据需要更改这个值来启用或禁用输入框
                //游戏列表
                gameList: [],
                activeGame: '',
                dictCode: '',
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                isExpandAll: false,
                // 表格数据
                managementList: [
                    {}
                ],
                // 弹出层标题
                title: '',
                // 是否显示新增弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    gameName: '',
                    remark: '',
                    dictCodeId: null
                },
                // 表单参数
                form: {
                    id: null,
                    sort: 0,
                    gameName: null, // 表单项
                    dictCodeId: null,
                    gameKey: null,
                    isRequired: 0,
                    fieldType: null,
                    pid: null,
                    parentField: null,
                    fieldValue: null
                },

                info: {},

                rules: {
                    gameName: [
                        {required: true, message: '游戏名称不能为空', trigger: 'blur'}
                    ],
                    gameField: [
                        {required: true, message: '字段名称不能为空', trigger: 'blur'}
                    ],
                    sort: [
                        {required: true, message: '排序不能为空', trigger: 'blur'},
                        {type: 'number', message: '排序必须为数字', trigger: 'blur'}
                        // { min: 0, message: '排序必须大于等于0', trigger: 'blur' }
                    ],
                    gameKey: [
                        {required: true, message: '游戏字段key不能为空', trigger: 'blur'}
                    ],
                    isRequired: [
                        {required: true, message: '是否必填不能为空', trigger: 'change'}
                    ],
                    fieldType: [
                        {required: true, message: '字段类型不能为空', trigger: 'change'}
                    ],
                    remark: [
                        {required: true, message: '备注不能为空', trigger: 'blur'}
                    ]
                },
                gameList: [],
                showNewInput: false
            }
        },
        created() {
            //查询游戏列字典
            this.queryParams.dictCodeId = Number(this.$route.query.dictCode)
            getData(this.queryParams.dictCodeId).then(response => {
                this.info = {...response.data}
            })

            this.getList()
        },

        methods: {


            // 刷新缓存
            refresh() {
                refreshCache().then(response => {
                    this.$modal.msgSuccess('刷新成功')
                    this.open = false
                    this.getList()
                })
            },


            goBack() {
                this.$router.push({path: 'manage'}).catch(err => {
                    console.log(err)
                })
            },

            getFieldTypeLabel(fieldType) {
                const fieldTypeLabels = {
                    'input': '输入框',
                    'checkbox': '多选框',
                    'radio': '单选框',
                    'select': '下拉框'
                }

                return fieldTypeLabels[fieldType] || fieldType
            },
            /** 查询列表 */
            getList() {
                this.loading = true
                listDict(this.queryParams).then(res => {
                    this.loading = false
                    this.gameList = res.data
                })
            },

            fetchGameList() {
                // 确保游戏列表非空后再访问其第一个元素
                this.form.gameName = this.info.dictLabel
                this.form.dictCodeId = this.info.dictCode
            },

            //新增 取消按钮
            cancel() {
                this.open = false
                this.reset()
            },

            //新增 表单重置
            reset() {
                this.form = {}
                this.resetForm('form')
            },

            /** 新增按钮操作 */
            handleAdd() {
                this.reset()
                this.open = true
                this.title = '新增字典'
                // this.showNewInput = false // 显示新输入框
                this.fetchGameList()
            },

            /** 新增 确认提交 */
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.pid == null) {
                            this.form.pid = Number(this.form.id)
                            addDict(this.form).then(response => {
                                this.$modal.msgSuccess('新增成功')
                                this.open = false
                                this.getList()
                            })
                        } else {
                            updateDict(this.form).then(response => {
                                this.$modal.msgSuccess('更新成功')
                                this.open = false
                                this.getList()
                            })
                        }
                    }

                })
            },
            // 新增
            add(row) {
                this.reset()
                this.open = true
                this.title = '新增子级'
                this.form.gameName = row.gameName;
                this.form.dictCodeId = row.dictCodeId
                this.form.parentField = row.gameField
                this.form.id = row.id
                // this.showNewInput = true // 显示新输入框
            },
            // 删除
            del(row) {
                this.$confirm('确认删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delDict(row.id).then(response => {
                        this.$modal.msgSuccess('删除成功')
                        this.getList()
                    })
                }).catch(() => {
                    // 用户点击了取消，不执行删除操作
                })

            },
            // 编辑
            edit(row) {
                this.reset()
                this.open = true
                this.title = '修改子级'
                this.form = {...row};
                console.log(row)
                // this.showNewInput = true
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.$refs.queryForm.resetFields()
                this.handleQuery()
            }

        }
    }
</script>
